<template>
	<view class="content">
		<nav-top :showType='1'></nav-top>
		<view class="content-title">
			<view>
				员工管理
			</view>
			<view class="content-title-rt">
				<van-button plain hairline type="primary" size="small" @click="onClickAdd">添加成员</van-button>
			</view>
		</view>
		<view class="content-box">
			<view class="item-box">
				<view>姓名</view>
				<view>手机号</view>
				<view>操作</view>
			</view>
			<view class="item-box shadow" v-for="item in listData">
				<view>{{ item.nickName }}</view>
				<view class="border-box">{{ item.userName }}</view>
				<view class="border-box" @click="onClickDel(item)"><text>删除</text></view>
			</view>
		</view>
		<!-- 添加员工弹窗 -->
		<van-popup v-model:show="showAdd" round :style="{ padding: '20px' }">
			<van-form @submit="onSubmit">
				<van-cell-group inset>
					<van-field v-model="fromData.username" name="姓名" label="姓名" placeholder="请输入名称"
						:rules="[{ required: true, message: '请填写姓名' }]" />
					<van-field v-model="fromData.tel" type="tel" name="手机号" maxlength="11" label="手机号" placeholder="请输入手机号"
						:rules="rulesName" />
					<!-- <van-field v-model="fromData.role" name="角色" label="角色" placeholder="请选择角色"
						:rules="[{ required: true, message: '选择角色' }]" @click="showPicker = true" /> -->
						<van-field name="checkboxGroup" label="角色" :rules="[{ required: true, message: '选择角色' }]">
						  <template #input>
						    <van-checkbox-group v-model="groupChecked" direction="horizontal">
						      <van-checkbox name="1" shape="square">站长</van-checkbox>
						      <van-checkbox name="2" shape="square">店员</van-checkbox>
						    </van-checkbox-group>
						  </template>
						</van-field>
				</van-cell-group>
				<div style="margin: 16px;">
					<van-button round block type="primary" native-type="submit">
						确认添加
					</van-button>
				</div>
			</van-form>
		</van-popup>
		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
		</van-popup>

	</view>
</template>

<script>
	import {
		reactive,
		toRefs,
		watchEffect,
		onMounted
	} from 'vue'
	import NavTop from '@/components/NavTop.vue'
	import {
		showConfirmDialog
	} from 'vant';
	import api from '@/api/staff.js'
	import $store from "@/store";
	export default {
		props: {},
		components: {
			NavTop
		},
		setup(props, ctx) {
			const data = reactive({
				listData: [],
				showPicker: false,
				showAdd: false,
				columns: [{
						text: '店长',
						value: '1'
					},
					{
						text: '店员',
						value: '2'
					}
				],
				groupChecked: [],
				fromData: {
					username: '',
					tel: ''
				},
				rulesName: [{
						required: true,
						message: '请输入手机号码'
					},
					{
						pattern: /^1[3-9]\d{9}$/,
						message: '手机号码格式错误'
					}
				]
			})
			// 获取员工列表
			const getList = () => {
				api.list({}).then(res => {
					res.rows.forEach(val => {
						data.listData.push(val)
					})
				})
			}
			// 
			onMounted(() => {
				getList()
			})
			watchEffect(() => {
				data.funcDatas = props.funcData
			})
			const onConfirm = ({
				selectedOptions
			}) => {
				data.fromData.role = selectedOptions[0].text
				data.showPicker = false;
			};
			const onClickDel = (item) => {
				showConfirmDialog({
						title: '删除员工',
						message: '确认删除？',
					})
					.then(() => {
						// on confirm
						api.remove({
							userIds: item.userId
						}).then(res => {
							data.listData = [];
							getList()
							data.showAdd = false
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							})
						})
					})
					.catch(() => {
						// on cancel
					});
			}
			// 清空表单数据
			const clearFrom = () => {
				data.fromData.username = ''
				data.fromData.tel = ''
				data.groupChecked = []
			}
			// 添加成员
			const onClickAdd = () => {
				clearFrom();
				data.showAdd = true
			}
			const onSubmit = () => {
				// 提交
				api.user({
					deptId: $store.state.areaId, // 加油站id
					userName: data.fromData.tel, // 手机号
					nickName: data.fromData.username, //姓名
					password: "123456", //密码默认123456	
					status: 0, //默认打开状态
					postIds: [],
					roleIds: data.groupChecked
				}).then(res => {
					data.listData = [];
					getList()
					data.showAdd = false
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					})
				})
			}
			return {
				...toRefs(data),
				onConfirm,
				onClickDel,
				onClickAdd,
				onSubmit
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.content-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			text-indent: 20rpx;
			margin-top: 20rpx;

			.content-title-rt {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				text-align: left;
				margin-right: 40rpx;

				text {
					display: block;
					text-indent: 10rpx;
				}
			}
		}

		.content-box {
			width: 100%;
			padding: 40rpx 20rpx 0;
			box-sizing: border-box;

			.item-box {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 20rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 26rpx;

				&:first-child {
					font-size: 30rpx;
				}

				&>view {
					width: 30%;
				}

				.border-box {
					display: flex;
					justify-content: center;
					// width: 18%;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 22rpx;

					text {
						color: rgb(228, 132, 132);
					}

					.van-cell {
						padding: 0;
					}
				}
			}

			.shadow {
				box-shadow: 0 0 22rpx 0 rgba(0, 0, 0, .1);
			}
		}
	}
</style>